<template>
  <div class="pagebox">
    <div class="app-container ">
      <div class="sunNumBox bg">
        <a-button type="primary" icon="vertical-align-bottom" @click="showModal">
          上传文件
        </a-button>
        <div>
          <a-tooltip title="">
            <a-progress :percent="percent" />
          </a-tooltip>
          <div class="colorin">
           <span>
             {{cloudDiskSize}}GB
           </span >
            / 5GB
          </div>
        </div>
      </div>
      <div class="bg">
        <a-table :loading="loading" :columns="columns" :data-source="data" :pagination="false" :rowKey="(record,index)=>{return index}">
          <a slot="filename" slot-scope="text" class="colorin" style="font-weight: bold">
            <a-icon type="file-text" style="color: #0eaee0;font-size: 18px;margin-right: 10px" theme="filled" />
            {{ text }}</a>
          <a slot="size" slot-scope="text" class="colorin" >{{ text || "\\" }}</a>
          <a slot="updateTime" slot-scope="text" class="colorin">{{ text }}</a>
          <template slot="operation" slot-scope="text, record">
            <a href="javascript:;" class="operationbtn" @click="gotoDeatil(record,1)">
              <a-icon type="eye" />
            </a>
            <a href="javascript:;" class="operationbtn" @click="gotoDeatil(record,2)">
              <a-icon type="form" />
            </a>
            <!-- <a :href="record.path" :download="record.filename" class="operationbtn">
              <a-icon type="download" />
            </a> -->

           <a href="#" @click="download(record.path,record.filename)" class="operationbtn">
              <a-icon type="download" />
            </a>
            <a-popconfirm
              v-if="data.length"
              title="确定删除吗?"
              @confirm="() => onDelete(record)"
            >
              <a href="javascript:;" class="operationbtn">
                <a-icon style="color: #D65B4A" type="delete" />
              </a>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
      <div style="padding: 20px 20px" class="bg">
        <a-pagination size="small" :total="total" :show-total="total => `一共 ${total} 条`" @change="changepage" />
      </div>
    </div>


    <a-modal
      title="上传文件"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <!--      <uploadNOaction v-model="file" />-->
      <div class="clearfix">
        <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" >
          <a-button>
            <a-icon type="upload" />
            选择文件
          </a-button>
        </a-upload>
      </div>
    </a-modal>
  </div>
</template>
<script>
//
const columns = [
  {
    title: "文件名",
    dataIndex: "filename",
    scopedSlots: { customRender: "filename" }
  },

  {
    title: "大小",
    dataIndex: "size",
    scopedSlots: { customRender: "size" }
  },
  {
    title: "修改日期",
    dataIndex: "updateTime",
    scopedSlots: { customRender: "updateTime" }
  }, {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

import api from "@/api/cloudStorage";
import uploadNOaction from "@/components/upload/uploadNOaction";
import { parse } from 'qs';

export default {
  components: {
    uploadNOaction
  },
  data() {
    return {
      data: [],
      columns,
      form: { num: 1 },
      dateType: 1,
      visible: false,
      confirmLoading: false,
      params: {
        companyId: "",
        filename: "",
        pageNum: 1,
        pageSize: 10

      },
      file: null,
      total: 0,
      fileList: [],
      uploading: false,
      cloudDiskSize:'',
      percent:0,
      loading:false
    };
  },
  created() {
    let roleId = localStorage.getItem("roleId");
    if (roleId == 1) {
      this.params.companyId = localStorage.getItem("compid");
    } else {
      this.params.companyId = localStorage.getItem("choseCompanyId");
    }

    this.findFile();
    this.findSize()
  },
  methods: {
    download(path, filename) {
        location.href = path + "?filename=" + filename+'.txt';
      },
    findSize(){
       api.findSize({companyId:this.params.companyId}).then(res => {
        let allseze= res.data.cloudDiskSize;
        let percent= parseFloat(allseze/(1024 * 1024 * 1024 * 5));
        this.percent=(percent*100).toFixed(2);
        this.cloudDiskSize =(allseze/(1024*1024*1024*1)).toFixed(2)
      
      });
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [file];
      return false;
    },

    handleUpload() {
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach(file => {
        formData.append("file", file);
      });
      this.uploading = true;
      api.uploadFile(this.params.companyId, formData).then(res => {
        if (res.code == 200) {
          this.findFile();
        }
      });

    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.handleUpload();
      this.confirmLoading = true;
        this.visible = false;
        this.confirmLoading = false;

    },
    handleCancel(e) {
      this.visible = false;
    },
    gotoDeatil(item, type) {
      this.$router.push({ path: "cloudStorageDetail", query: { id: item.id, type,name:item.filename} });
    },

    changepage(page, size) {
      this.params.pageNum = page;
      this.findFile();
    },
    findFile() {
      this.loading=true
      api.findFile(this.params).then(res => {
          this.loading=false
        this.total = res.data.total;
        let data=res.data.rows
        data.forEach(item => {

              if (item.size == '') {
                var size = '-'
              } else {
                if (item.size < 1048576) {
                  var size = (item.size / 1024).toFixed(2) + 'KB'
                } else if (item.size > 1048576 && item.size < 1073741824) {
                  var size = (item.size / 1024 / 1024).toFixed(2) + 'MB'
                } else if (item.size > 1073741824) {
                  var size = (item.size / 1024 / 1024 / 1024).toFixed(2) + 'GB'
                }
              }
            item.size=size
            })
        this.data = data
      });
    },
    onDelete(item) {
      this.delFile(item.id);
    },
    delFile(fileId) {
      api.delFile({ fileId: fileId }).then(res => {
        if (res.code == 200) {
          this.$message.info("删除成功");
          this.findFile();
        }
      });
    },
    changedate(i) {
      this.dateType = i;
    },
    handleSubmit() {

    }
  }
};
</script>

<style scoped lang="less">
@import "index.less";
</style>
